<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用户权限</title>
</head>
<!--引入 element-ui 的样式，-->
<link rel="stylesheet" href="../../css/element.css">
<!-- 必须先引入vue，  后使用element-ui -->
<script src="../../js/vue.js"></script>
<!-- 引入element 的组件库-->
<!--<script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
<script src="../../element-ui/lib/index.js"></script>
<!--引入sxios组件-->
<script src="../../js/axios.js"></script>
<body>
<div id="app">
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>用户权限</span>
    </div>
    <div class="text item">
      <el-table
          ref="multipleTable"
          stripe :data="User.slice((currentPage-1)*pagesize,currentPage*pagesize)"
          border
          fit
          :row-key='getRowKeys'
          :expand-row-keys="expands"
          @expand-change="resetVisit"
          tooltip-effect="dark"
          style="width: 100%">
        <el-table-column
            prop="username"
            label="用户名">
        </el-table-column>
        <el-table-column
            prop="register_time"
            label="注册时间"
            :formatter="formatDate"
            sortable>
        </el-table-column>
        <el-table-column
            label="账号状态"
            :filters="[{ text: '禁用', value: false }, { text: '正常', value: true }]"
            :filter-method="lockedFlagfilterTag"
            filter-placement="bottom-end">
          <template slot-scope="scope">
            <el-tag :type="scope.row.lockedFlag === true ? 'success' : 'danger'" disable-transitions>
              {{ scope.row.lockedFlag === false ? '禁用' : '正常' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="信息状态"
          :filters="[{ text: '未填写', value: false }, { text: '已填写', value: true }]"
          :filter-method="personalfilterTag"
          filter-placement="bottom-end">
          <template slot-scope="scope">
            <el-tag :type="scope.row.personal === true ? 'success' : 'danger'" disable-transitions>
              {{ scope.row.personal === false ? '未填写' : '已填写' }}
            </el-tag>
          </template>
        </el-table-column>
    
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item :label="item.authName" v-for="item in menulist">
                  <el-row>
                  <template v-for="subItem in item.children" :id="subItem.path">
                  <el-col :span="12">
                    <el-checkbox-group v-model="multipleSelection">
                      <el-checkbox :label="subItem.id" :key="subItem.id">{{subItem.authName}}</el-checkbox>
                    </el-checkbox-group>
                    
                    <!--<el-switch-->
                      <!--v-if="aaa(props.row.visits,subItem.id)"-->
                      <!--:name="subItem.id+''"-->
                      <!--v-model="isopen"-->
                      <!--@click="bbb($event,subItem.id)"-->
                      <!--active-color="#13ce66"-->
                      <!--inactive-color="#ff4949">-->
                    <!--</el-switch>-->
                    <!--<el-switch-->
                      <!--v-else-->
                      <!--:name="subItem.id+''"-->
                      <!--v-model="isclear"-->
                      <!--@click="bbb($event,subItem.id)"-->
                      <!--active-color="#13ce66"-->
                      <!--inactive-color="#ff4949">-->
                    <!--</el-switch>-->

                  </el-col>
                </template>
                  </el-row>
                </el-form-item>
              <el-form-item>
                <el-button icon="el-icon-document-checked" @click="updateAuthority(props.row.uid)">设置权限</el-button>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
  
      </el-table>
      <div style="text-align:center;margin-top: 15px">
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[1, 3, 5, 8]"
            :page-size="pagesize"
            :pager-count="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="User.length">
        </el-pagination>
      </div>
    </div>
  </el-card>
</div>
</body>
<script>
    let app = new Vue({
        el: '#app',
        name: 'UserAuthority',
        data() {
            return {
                User: [],
                menulist: [],
                // 分页-默认第几页
                currentPage: 1,
                //分页-默认一页多少条
                pagesize: 5,
                // 选中权限设置
                multipleSelection: [],
                expands: [],
                getRowKeys (row) {
                    return row.uid
                },
            }
        },
        created () {
            axios({
                url: '/userAuthority',
            }).then(res => {
                console.log(res);
                this.User = res.data.User;
                this.menulist = res.data.menulist;
            })
        },
        methods:{
            //日期格式化
            formatDate(row, column) {
                // 获取单元格数据
                let data = row[column.property]
                if(data == null) {
                    return null;
                }
                let dt = new Date(data);
                return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds();
            },
            // 账号状态标签
            lockedFlagfilterTag(value, row) {
                return row.lockedFlag === value;
            },
            // 信息状态标签
            personalfilterTag(value, row) {
                return row.personal === value;
            },
            // 状态修改
            updateAuthority(uid){
                console.log(this.multipleSelection);
                console.log(uid);
                axios({
                    method: 'post',
                    url: '/updateAuthority',
                    data: {
                        authoritys: this.multipleSelection,
                        uid: uid,
                    },
                }).then(res => {
                    if(res.status==200){
                        this.$message({
                            message: '修改用户权限成功！',
                            type: 'success'
                        });
                    }else{
                        this.$message({
                            message: '修改失败！',
                            type: 'warning'
                        });
                    }
                    window.location.href = window.location.href;
                })
            },
            resetVisit(row,expandedRows) {
                console.log(row);
                this.multipleSelection = row.visits;
                var that = this
                if (expandedRows.length) {
                    that.expands = []
                    if (row) {
                        that.expands.push(row.uid)
                    }
                } else {
                    that.expands = []
                }
            },
            // 分页显示
            handleSizeChange: function(val) {
                this.pagesize = val;
            },
            handleCurrentChange: function(currentPage) {
                this.currentPage = currentPage;
            },
        }
    });
</script>
<style type="text/css">
  /*表格居中*/
  .el-table td, .el-table th {
    text-align: center !important;
  }
  /*表格展开数据表单样式*/
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 80px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 15%;
  }
</style>
</html>